<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <script>
        alert('请安装最新版本浏览器打开此页面')
    </script> -->
    <style>
        *{
            margin: 0;padding: 0
        }
        .box1{
            height: 100px;
            background: red !important;
            background: black
        }
        .box2{
            /* 宽高？ */
            background: pink;
            min-height: 300px; /* 高版本里面解析 */
            _height: 300px;/* 低版本解析：在低版本浏览器中height会默认解析成最小高度 */
        }
        .box3{
            height: 100px;
            background: green
        }
    </style>
</head>
<body>
    <div class="box1">上</div>
    <div class="box2">
      
         <p>1</p>
         <p>2</p>
         <p>3</p>
         <p>4</p>
         <p>5</p>
         <p>6</p>
         <p>7</p>
         <p>8</p>
         <p>9</p>
         <p>10</p>
         <p>11</p>
         <p>12</p>
         <p>13</p>
         <p>14</p>
         <p>15</p>
         <p>16</p>
         <p>17</p>
         <p>18</p> 
         <p>19</p>
         <p>20</p>
         <p>21</p>
         <p>22</p>
         <p>23</p>
         <p>24</p>
         <p>25</p>
         <p>26</p>
         <p>27</p>
         <p>28</p>
         <p>29</p>
         <p>30</p>
    </div>
    <div class="box3">下</div>
</body>
</html>
<!-- 
     - 在浏览器中有三个盒子：上 、 中 、 下
        - 上、下两个盒子的高度为100px
        - 中 有文本的时候让其自动撑开/没有文本的时候保持一个最小高度

    该怎么去实现？
        - 最小高度属性 min-height 
        - 注意:最小高度是有兼容问题
            - min-height只能在高版本浏览器中使用，低版本不可以使用

    过滤器:
        1.下划线过滤器 _属性:属性值 (只能在低版本里面使用)
        2.最高权重 属性:属性值 !important; 高于一切

-->